<template>
  <div class="m">
    <div style="width: 320px; margin-right: 20px">
      <div style="height: 320px" class="comp">
        <img src="..\assets\zhyq\she\设备运行.png" />
      </div>
      <div style="height: 273px" class="comp">
        <img src="..\assets\zhyq\she\故障告警.png" />
      </div>
      <div style="height: 301px" class="comp">
        <img src="..\assets\zhyq\she\设备列表.png" />
      </div>
    </div>
    <div style="width: 1206px">
      <div style="height: 604px">
        <div style="width: 30px; margin-top: 60px">
          <el-button type="text" class="map-button">
            <img src="..\assets\cysj\设备按钮.png"
          /></el-button>
        </div>
      </div>
      <div style="height: 194px" class="comp">
        <img src="..\assets\zhyq\总览最新事件.png" />
      </div>
    </div>
    <div style="width: 319px !important; margin-left: 20px">
      <div style="height: 173px" class="comp">
        <img src="..\assets\zhyq\she\设备可用率.png" />
      </div>
      <div style="height: 219px" class="comp">
        <img src="..\assets\zhyq\she\工单状态统计.png" />
      </div>
      <div style="height: 179px" class="comp">
        <img src="..\assets\zhyq\she\工单处理统计.png" />
      </div>
      <div style="height: 301px" class="comp">
        <img src="..\assets\zhyq\she\工单列表.png" />
      </div>
    </div>
  </div>
</template>

<script >
export default {};
</script>

<style lang="less" scoped>
.m {
  display: flex;
  width: 1880px;
  background-image: url("../assets/zhyq/she/设备地图.png");
}
.comp {
  margin: 20px 0;
  border: 1px solid #3c6fd2;
  background-color: #111e4b;
}
/deep/.el-button + .el-button {
  margin-left: 0px;
}
/deep/ .map-button {
  padding: 0px 20px;
}
</style>
